<template>
	<view>
		<view class="author" v-if="item">
			<u-avatar @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + item.user_id)" size="78" :src="item.avatar"></u-avatar>
			<view class="name" @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + item.user_id)">
				{{item.nickname}}
			</view>
			<view v-if="item.is_follow==0" class="btn" @click="dynamicAction(3,item.user_id)">
				关注
			</view>
			<view v-else class="btn btn-1" @click="dynamicAction(3,item.user_id)">
				取消关注
			</view>
		</view>
		<u-swiper height="750" :list="item.images" :video="item.video" img-mode="aspectFit"></u-swiper>
		<view class="info">
			<view class="order-status">
				<view class="">
					<n-voice :voice="item.voice"></n-voice>
					<view class="title-1">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.content}}
					</view>
					<view class="badge-1" v-if="item.tags">
						<view v-for="(_item,i) in item.tags.split(',')" :key="i" class="item">{{_item}}</view>
					</view>
				</view>
			</view>
			<view class="user-info" v-if="item">
				<view class="name line-clamp">
					{{item.create_time}} {{item.address || ''}}
				</view>
				<view class="flex" @click="dynamicAction(1)">
					<u-icon v-if="item.is_like==0" size="40" name="thumb-up" color="#555"></u-icon>
					<u-icon v-else size="40" name="thumb-up-fill" color="#519D76"></u-icon>
					<view class="text mx-50">
						{{item.like_num || 0}}
					</view>
				</view>
				<view class="flex" @click="dynamicAction(2)">
					<u-icon v-if="item.is_collection==0" size="40" name="star" color="#555"></u-icon>
					<u-icon v-else size="40" name="star-fill" color="#519D76"></u-icon>
					<view class="text">
						{{item.collection_num || 0}}
					</view>
				</view>
			</view>
		</view>
		<view class="comment">
			<view class="title-1">
				别人对TA的评论
			</view>
			<view class="list">
				<view class="item" v-for="(item,i) in commentList" :key="i">
					<u-avatar  @click="$tools.to('/pages_user/userCenter/otherUserCenter?id=' + item.user_id)" size="72" :src="item.avatar"></u-avatar>
					<view class="pl-20 flex-1">
						<view class="name">{{item.nickname}}</view>
						<view class="desc">{{item.content}}</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" ></u-loadmore>
		</view>
		<!-- 底部操作栏 -->
		<view class="tabbar-bottom">
			<view class="input">
				<u-input v-model="content" placeholder="发表评论"></u-input>
			</view>
			<!-- <image class="icon-68" src="../../pages_message/static/Group29@2x.png" mode="widthFix"></image> -->
			<view class="btn" @click="submitCommnent">
				发送
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				item: '',
				commentList:[],
				content:'',
				page:1,
				status: 'nomore',	//loadmore loading / nomore
			};
		},
		computed:{
			...mapState({
				userInfo:(state)=>state.user.userInfo
			})
		},
		onLoad(e) {
			this.id = e.id
			this.getDetail()
			this.getDynamicCommentList()
		},
		onReachBottom() {
			if (this.status === 'nomore') {
				return
			}
			this.page++
			this.status = 'loading'
			this.getDynamicCommentList()
		},
		methods: {
			getDetail() {
				this.$api.dynamicDetail({
					dynamic_id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.item = res.data
					} else {
						this.$tools.toast(res.msg)
					}
				})
			},
			getDynamicCommentList(){
				this.$api.dynamicCommentList({
					dynamic_id:this.id,
					page:this.page
				}).then(res=>{
					if(res.code==1){
						if (this.page === res.data.last_page || res.data.total == 0) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
						this.commentList.push(...res.data.data)
					}else{
						this.$tools.toast(res.msg)
					}
				})
			},
			// 点赞/收藏/关注
			dynamicAction(type,be_user_id){
				let data = {
					dynamic_id:this.id,
					type
				}
				if(type==3){
					data.be_user_id = be_user_id
				}
				this.$api.dynamicAction(data).then(res=>{
					this.$tools.toast(res.msg)
					if(res.code==1){
						if(type==1){
							if(this.item.is_like==0){
								this.item.like_num+=1
							}else{
								this.item.like_num-=1
							}
							this.item.is_like = !this.item.is_like
							
						}
						if(type==2){
							if(this.item.is_collection==0){
								this.item.collection_num+=1
							}else{
								this.item.collection_num-=1
							}
							this.item.is_collection = !this.item.is_collection
						}
						if(type==3){
							this.item.is_follow = !this.item.is_follow
						}
					}
				})
			},
			// 添加评论
			submitCommnent(){
				if(!this.$tools.isEmpty(this.content,'评论不能为空')) return
				this.$api.submitCommnent({
					content:this.content,
					dynamic_id:this.id,
				}).then(res=>{
					if(res.code==1){
						this.commentList.unshift({
							avatar:this.userInfo.avatar,
							nickname:this.userInfo.nickname,
							content:this.content
						})
						this.content = ''
						// this.page = 1
						// this.commentList = []
						// this.status = 'loading'
						// this.getDynamicCommentList()
					}else{
						this.$tools.toast(res.msg)
					}
				})
			},
			// 
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}
	
	.badge-1 {
		@include flex;
		flex-wrap: wrap;
		margin-top: 20upx;
	
		.item {
			text-align: center;
			min-width: 205upx;
			line-height: 48upx;
			background: #EDF5F1;
			border-radius: 24upx;
			font-size: 26upx;
			color: #519D76;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}
	}

	.author{
		padding: 30upx;
		background: #fff;
		@include flex-between;
		.name{
			flex: 1;
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			margin-left: 20upx;
		}
		.btn{
			text-align: center;
			width: 150upx;
			line-height: 62upx;
			background: #519D76;
			border-radius: 8upx;
			font-size: 28upx;
			color: #FFFFFF;
			
			&-1{
				background: #fff;
				color: #519D76;
				border: 2upx solid #519D76;
			}
		}
	}

	.map {
		width: 320upx;
		height: 400upx;
		border-radius: 16upx;
		overflow: hidden;
	}

	.info {
		padding: 0 30upx;
		background: #fff;

		.order-status {
			@include flex-between;
			padding: 30upx 0;
			line-height: 1;

			.title-1 {
				font-size: 32upx;
				font-weight: 500;
				line-height: 45upx;
				color: #333333;
			}

			.desc {
				margin-top: 20upx;
				font-size: 28upx;
				font-weight: 400;
				color: #999999;
				line-height: 40upx;
				word-break:break-all;
			}

			.price {
				font-size: 42upx;
				font-weight: bold;
				color: #328B5A;
			}
		}



		.car-info {
			padding: 30upx 0;

			.item {
				@include flex-between;

				.title {
					font-size: 30upx;
					line-height: 60upx;
					color: #999999;
				}

				.text {
					font-size: 30upx;
					line-height: 60upx;
					color: #333333;
				}
			}
		}

	}
	
	

	.user-info {
		@include flex-between;
		padding-bottom: 50upx;

		.name {
			font-size: 22upx;
			font-weight: 400;
			color: #333333;
			flex: 1;
		}

		.text {
			font-size: 18upx;
			color: #999999;
			margin-left: 8upx;
		}

		image {
			margin-left: 60upx;
		}
	}
	
	

	.comment {
		margin-top: 16upx;
		padding: 40upx 30upx 140upx;
		background: #fff;

		.title-1 {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			margin: 0 0 30upx;
		}

		.badge {
			@include flex;
			flex-wrap: wrap;
			margin-bottom: 20upx;

			.item {
				text-align: center;
				min-width: 205upx;
				line-height: 48upx;
				background: #EDF5F1;
				border-radius: 24upx;
				font-size: 26upx;
				color: #519D76;
				margin-right: 20upx;
				margin-bottom: 20upx;
			}
		}

		.list {
			margin-top: 40upx;
			.item {
				display: flex;
				border-bottom: 1upx solid #EFEFEF;
				padding-bottom: 40upx;
				margin-bottom: 40upx;

				.name {
					font-size: 30upx;
					color: #7B7B7B;
				}

				.desc {
					font-size: 30upx;
					line-height: 45upx;
					color: #333333;
				}
			}
		}
	}

	.tabbar-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		@include flex-between;
		padding: 20upx 30upx;
		background: #fff;
		border-top: 1upx solid #EFEFEF;

		.menu {
			@include flex-between;
			padding-right: 40upx;
			text-align: center;
			flex: 1;

			.title {
				font-size: 24upx;
				color: #999999;
			}
		}
		.input{
			flex: 1;
			height: 68upx;
			background: #F5F5F5;
			border: 1upx solid #EFEFEF;
			border-radius: 34upx;
			padding: 0 40upx;
		}
		.btn {
			font-size: 30upx;
			font-weight: 500;
			color: #FFFFFF;
			width: 132upx;
			line-height: 68upx;
			background: #519D76;
			border-radius: 40upx;
			text-align: center;
			margin-left: 30upx;
		}
	}
</style>
